<template>
  <transition name="el-fade-in-linear">
    <el-menu
      v-if="isShowContextMenu"
      :style="{ 'top': `${y}px`, 'left': `${x}px`}"
      class="g6-component-contextmenu"
      @select="menuSelect"
    >
      <el-menu-item
        v-for="item in menuList"
        :key="item.type"
        :index="item.type"
        :disabled="disabled(item.type)"
      >
        <span slot="title" style="display: flex;align-items: center">
          <custom-icon v-if="item.icon" :icon-type="item.icon" style="font-size: 12px;width: auto;" />
          {{ item.label }}
        </span>
      </el-menu-item>
    </el-menu>
  </transition>

</template>

<script>
import { EnumAllContextMenu, EnumEdgeContextMenu, EnumNodeContextMenu, EnumCanvasContextMenu } from './G6Utils/constant';
import CustomIcon from '@/components/CustomIcon';
export default {
  name: 'ContextMenu',
  components: { CustomIcon },
  props: {
    edgeContextMenu: {
      type: Array,
      required: false,
      default: () => Object.values(EnumEdgeContextMenu)
    },
    nodeContextMenu: {
      type: Array,
      required: false,
      default: () => Object.values(EnumNodeContextMenu)
    },
    canvasContextMenu: {
      type: Array,
      required: false,
      default: () => Object.values(EnumCanvasContextMenu)
    }
  },
  data() {
    return {
      menuList: [],
      x: 50,
      y: 100,
      contextMenuEvent: null,
      isShowContextMenu: false,
      g6Utils: this.$parent.g6Utils
    };
  },
  computed: {
    EnumAllContextMenu: () => EnumAllContextMenu,
    canUndo() {
      /* 如果首次打开清除操作栈则不需要过滤渲染操作*/
      // return !(this.g6Utils.graph.getUndoStack().length - 1);
      return !(this.g6Utils.graph.getUndoStack().length);
    },
    canRedo() {
      return !this.g6Utils.graph.getRedoStack().length;
    },
    disabled() {
      return function(type) {
        if (type === EnumCanvasContextMenu.undo.type) {
          return this.canUndo;
        } else if (type === EnumCanvasContextMenu.redo.type) {
          return this.canRedo;
        } else {
          return false;
        }
      };
    }
  },
  mounted() {
    this.bindContextMenuEvent();
  },
  methods: {
    menuSelect(index) {
      switch (index) {
        case EnumAllContextMenu.clear.type:
          // 使用其他方式无法回退操作
          this.g6Utils.graph.changeData({}, true);
          break;
        case EnumAllContextMenu.refreshLayout.type:
          this.g6Utils.graph.layout();
          break;
        case EnumAllContextMenu.redo.type:
          this.g6Utils.redo();
          break;
        case EnumAllContextMenu.undo.type:
          this.g6Utils.undo();
          break;
        default:
      }
      this.isShowContextMenu = false;
      this.$emit('contextMenuClick', index, this.contextMenuEvent);
    },
    bindContextMenuEvent() {
      const recordItem = (e = {}, contextMenuList = []) => {
        e.preventDefault();
        this.menuList = contextMenuList;
        this.x = e.canvasX;
        this.y = e.canvasY;
        this.contextMenuEvent = e;
        this.isShowContextMenu = true;
      };
      this.g6Utils.graph.on('node:contextmenu', e => {
        recordItem(e, this.nodeContextMenu);
      });
      this.g6Utils.graph.on('canvas:contextmenu', e => {
        recordItem(e, this.canvasContextMenu);
      });
      this.g6Utils.graph.on('edge:contextmenu', e => {
        recordItem(e, this.edgeContextMenu);
      });

      this.g6Utils.graph.on('click', e => {
        this.isShowContextMenu = false;
        this.menuList = [];
        this.x = 0;
        this.y = 0;
        this.contextMenuEvent = null;
      });
    }
  }
};
</script>

<style lang="scss">
.g6-component-contextmenu{
  position: absolute!important;
  z-index: 1;
  .el-menu-item{
    height: 20px;
    line-height: 20px;
    padding: 0 10px!important;
    font-size: 12px;
  }
}
</style>
